<template>
  <div class="container" :style="{ width: curWidth + 'px' }" ref="containerRef">
    <div class="reel reel-top"></div>
    <div class="info" :style="{ height: curTranslateY + 'px' }">
      <slot name="info"></slot>
    </div>
    <div class="reel reel-bottom"></div>
  </div>
</template>
<script setup lang="ts">
import { ref, withDefaults, onMounted, computed } from "vue";
const props = withDefaults(
  defineProps<{
    height?: number;
    width?: number;
    expandSpeed?: number;
    shrinkSpeed?: number;
    append?: string;
  }>(),
  {
    height: 800,
    width: 700,
    expandSpeed: 5,
    shrinkSpeed: 10,
    append: "",
  }
);
const curTime = ref(0);
const curTranslateY = ref(0);

const scrollExpand = () => {
  curTime.value = requestAnimationFrame(scrollExpand);
  const { expandSpeed, height, append, width } = props;
  if (append && curWidth.value < width) {
    curWidth.value += expandSpeed;
  } else {
    if (curTranslateY.value < height) {
      curTranslateY.value += expandSpeed;
    } else {
      cancelAnimationFrame(curTime.value);
    }
  }
};

const handleScrollExpand = () => {
  cancelAnimationFrame(curTime.value);
  curTime.value = requestAnimationFrame(scrollExpand);
};

// 获取目标元素的中心点与当前元素的中心点的距离
const appendDomTarget = computed(() => {
  if (props.append) {
    const target = document
      .getElementById(props.append)
      .getBoundingClientRect();
    const centerX = target.left + target.width / 2;
    const centerY = target.top + target.height / 2;
    const curCenterX = window.innerWidth / 2;
    const curCenterY = 40+28/2 // 因为我设置了top是40px，卷轴高度是28px
    const calY=curCenterY-centerY
    const calX=curCenterX-centerX
    return { curCenterX, curCenterY, centerX, centerY,calX,calY};
  }
  return null
});
// 消失所需耗时
const disappearTime = computed(() => {
  return props.width / props.shrinkSpeed;
});
const containerRef = ref<HTMLElement | null>(null);

// 旋转并移动
const rotateTimes = ref(0);
const handleRotateAndMove = () => {
   rotateTimes.value++;
   containerRef.value!.style.rotate = (curTime.value % 180) * 30 + "deg";
   const {calX,calY}=appendDomTarget.value!
   const frameCalX=calX/disappearTime.value
   const frameCalY=calY/disappearTime.value
   // 每一帧移动frameCalX，frameCalY
   const needCalX=rotateTimes.value*frameCalX
   containerRef.value!.style.left = `calc(50% - ${needCalX}px)`;
   containerRef.value!.style.top = `calc(54px - ${rotateTimes.value*frameCalY}px)`;
};

const emit = defineEmits(["shrinkEnd"]);
const scrollShrink = () => {
  curTime.value = requestAnimationFrame(scrollShrink);
  const { shrinkSpeed } = props;
  if (curTranslateY.value > 0) {
    curTranslateY.value -= shrinkSpeed;
  } else {
    if (props.append && curWidth.value > 0) {
      curWidth.value -= shrinkSpeed;
      // 旋转并移动
      handleRotateAndMove();
    } else {
      cancelAnimationFrame(curTime.value);
      emit("shrinkEnd");
    }
  }
};

const handleScrollShrink = () => {
  cancelAnimationFrame(curTime.value);
  curTime.value = requestAnimationFrame(scrollShrink);
};

// 当前的宽度
const curWidth = ref(0);
onMounted(() => {
  if (props.append) {
    handleScrollExpand();
    // 居中
    containerRef.value!.style.left = `calc(50% - ${props.width / 2}px)`;
  } else {
    curWidth.value = props.width;
  }
});

defineExpose({
  handleScrollExpand,
  handleScrollShrink,
});
</script>
<style scoped>
.container {
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 40px;
  max-height: 90%;
  overflow: auto;
}
.reel {
  height: 28px;
  margin: 0 15px;
  border-radius: 1px;
  border-image: url("https://imgservices-1252317822.image.myqcloud.com/coco/s04232024/c510959b.0txvec.png")
    fill 40 36/14px 12px/0 12px;
  box-shadow: 0 5px 10px 5px rgba(0, 0, 0, 0.3),
    0 5px 10px 5px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}

::-webkit-scrollbar {
    width: 5px;
    height: 10px;
}

::-webkit-scrollbar-track {
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    border-radius: 10px;
    box-shadow: inset 0 0 0 rgba(0, 158, 255, 0.46);
    background-color: rgba(0, 158, 255, 0.46);
}

.info {
  background: url("https://imgservices-1252317822.image.myqcloud.com/coco/s04232024/682ad393.to0id6.jpg");
  margin: 0 15px;
  overflow: auto;
}
</style>
